<template>
    <view class="container">
        <u-steps class="u-p-t-20" :list="numList" mode="number" :current="3" active-color="#ff5000"></u-steps>
        <view class="item-container">
            <view class="title">开户行银行许可证</view>
            <view class="content">
                <u-form :model="finlQuafForm" ref="finlQuafForm" label-width="320" :error-type="errorType">
                    <u-form-item label="银行开户名：" prop="bank_account_name" required>
                        <u-input v-model="finlQuafForm.bank_account_name" placeholder="请输入银行开户名" :maxlength="20"
                            clearable></u-input>
                    </u-form-item>
                    <u-form-item label="公司银行账号：" prop="bank_number" required>
                        <u-input v-model="finlQuafForm.bank_number" placeholder="请输入公司银行账号" :maxlength="18" clearable>
                        </u-input>
                    </u-form-item>
                    <u-form-item label="开户银行支行名称：" prop="bank_name" required>
                        <u-input v-model="finlQuafForm.bank_name" placeholder="请输入开户银行之行名称" :maxlength="30" clearable>
                        </u-input>
                    </u-form-item>
                    <u-form-item label="开户银行所在地：" prop="bank_region" required>
                        <u-input @click="showAddressSelector = true" disabled v-model="finlQuafForm.bank_address"
                            placeholder="请选择开户银行所在地" clearable></u-input>
                    </u-form-item>
                    <u-form-item label="开户银行许可证电子版：" prop="bank_img" required>
                        <u-upload :action="action" :header="header" :max-count="1" :file-list="bankImgFile"
                            @on-remove="bankImgRemove" @on-success="bankImgSuccess">
                        </u-upload>
                    </u-form-item>
                </u-form>
            </view>
        </view>
        <view class="next-btns u-text-center u-p-b-20">
            <u-button class="u-m-r-40" size="mini" @click="handleBackStep">上一步</u-button>
            <u-button size="mini" @click="handleNextStep">下一步</u-button>
        </view>
        <u-popup v-model="showAddressSelector" mode="bottom" closeable close-icon-size="20" border-radius="20">
            <region-picke @addressSelectorChanged="addressSelectorChanged"
                @closeRegionpicke="showAddressSelector = false" :show="showAddressSelector"></region-picke>
        </u-popup>
    </view>
</template>

<script>
    import * as API_Shop from '@/api/shop'
    import {
        Foundation,
        RegExp
    } from '@/ui-utils'
    import {
        api
    } from '@/config/config'
    import Cache, {
        Keys
    } from '@/utils/cache.js'
    export default {
        data() {
            const req_rule = (message, trigger) => ({
                required: true,
                message,
                trigger: [trigger || 'blur']
            });
            const len_rule = (min, max) => ({
                min,
                max,
                message: `'长度在 ${min} 到 ${max} 个字符`
            });
            return {
                numList: [{
                    name: '入驻协议'
                }, {
                    name: '基本信息'
                }, {
                    name: '认证信息'
                }, {
                    name: '资质信息'
                }, {
                    name: '店铺信息'
                }],
                finlQuafForm: {
                    bank_account_name: '',
                    bank_number: '',
                    bank_name: '',
                    bank_region: '',
                    bank_address: '',
                    bank_img: ''
                },
                rules: {
                    bank_account_name: [req_rule('请输入银行开户名！')],
                    bank_number: [req_rule('请输入公司银行账号！')],
                    bank_name: [req_rule('请输入开户银行之行名称！')],
                    bank_region: [{
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error('请选择开户银行所在地！'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur'
                    }],
                    bank_img: [req_rule('请上传开户银行许可证电子版！', 'change')]
                },
                errorType: ['toast'],
                action: `${api.buyer}/uploaders`,
                header: {
                    Authorization: Cache.getItem(Keys.accessToken)
                },
                showAddressSelector: false, //地区选择弹出框是否显示
                bankImgFile: []
            };
        },
        onLoad() {
            API_Shop.getApplyShopInfo().then(response => {
                Object.keys(this.finlQuafForm).forEach(key => this.finlQuafForm[key] = response[key])
                this.bankImgFile = this.finlQuafForm.bank_img ? [{
                    url: this.finlQuafForm.bank_img
                }] : []
                this.finlQuafForm.bank_region = response.bank_town_id && response.bank_town_id != 0 ? response
                    .bank_town_id : response.bank_county_id
                this.finlQuafForm.bank_address = response.bank_province &&
                    `${response.bank_province || ''} ${response.bank_city || ''} ${response.bank_county || ''} ${response.bank_town || ''}`
            })
        },
        onReady() {
            this.$refs.finlQuafForm.setRules(this.rules);
        },
        methods: {
            // 开户银行所在地
            addressSelectorChanged(object) {
                const obj = {
                    last_id: object[object.length - 1].id,
                    addrs: object.map(key => {
                        return key.local_name
                    }).join(' ')
                }
                this.finlQuafForm.bank_region = obj.last_id
                this.finlQuafForm.bank_address = obj.addrs
            },
            // 开户银行许可证电子版
            bankImgSuccess(res) {
                this.finlQuafForm.bank_img = res.url
            },
            bankImgRemove() {
                this.finlQuafForm.bank_img = ''
            },
            // 上一步
            handleBackStep() {
                uni.navigateBack()
            },
            // 下一步
            handleNextStep() {
                const params = JSON.parse(JSON.stringify(this.finlQuafForm))
                this.$refs.finlQuafForm.validate(valid => {
                    if (valid) {
                        API_Shop.applyShopStep(3, params).then(response => {
                            this.$u.route('/pages/shop/apply/shop-info')
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .container {
        height: 100%;
        background-color: #FFFFFF;

        .item-container {
            border-top: 1px dashed #E1E1E1;
            margin: 20rpx 0;

            .title {
                margin: 20rpx 0;
                font-size: 40rpx;
                font-weight: 600;
                text-align: center;
            }

            .content {
                padding: 0 30rpx;
            }

            .licence-range {
                margin-left: 260rpx;
            }
        }
    }
</style>
